<style lang="less">
</style>
<template>
  <div>
    <!--工具条-->
    <search-bar style="height: 90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="司机姓名">
            <el-input v-model="LIKE_driverName"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系手机">
            <el-input v-model="searchCondition.LIKE_driverPhone"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌号">
            <el-input v-model="LIKE_plateNumber"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="司机状态">
            <el-select v-model="searchCondition.EQ_status">
              <el-option v-for="item in $store.getters.TRUCK_LOAD_DRIVE_STATUS"
                         :key="item.dictVal"
                         :label="item.cnDictValname"
                         :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="添加日期">
            <el-date-picker
              v-model="dateRangeDriver"
              type="daterange"
              align="right"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!-- 操作 openDialog3-->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="resetSearchConditionDriver" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchTableListDriver" style="float: right;margin-right: 10px">查询</el-button>
    </el-col>
    <!-- 表格-->
    <el-table highlight-current-row border
              :data="tableData"
              v-loading="listLoading"
              style="width: 100%;height:100%">
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>
      <el-table-column prop="createdDate" label="添加日期" width="220" align="center">
      </el-table-column>
      <el-table-column prop="driverName" label="司机姓名" width="150">
      </el-table-column>
      <el-table-column prop="driverPhone" label="联系手机" width="150">
      </el-table-column>
      <el-table-column prop="status" label="司机状态" width="100">
        <template slot-scope="scope">
          <label v-if="scope.row.status === 104002001">未注册</label>
          <label v-if="scope.row.status === 104002002">未认证</label>
          <label v-if="scope.row.status === 104002003">已认证</label>
        </template>
      </el-table-column>
      <el-table-column prop="plateNumber" label="车牌号" min-width="220">
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
import {
  searchTruckBellwetherDriverList
} from '../../../api/v3/TruckBellwether';
import { resetObjNull, objToFilter } from '../../../lib/util.js';

export default {
  name: 'TruckBellwetherDriver',
  props: {
    TruckBellwetherIdDriver: null
  },
  data () {
    return {
      activeName: 'first',
      // 基本资料
      truckBellwetherId: null,
      // 运力池
      LIKE_driverName: null,
      LIKE_plateNumber: null,
      searchCondition: {
        'LIKE_truckLoadDriver.driverName': null, //  司机 姓名
        'LIKE_driverPhone': null, // 司机电话
        'LIKE_truckLoadDriver.truckNumber': null, // 车牌号
        'EQ_status': null, // 司机状态
        'GTE_createdDate': null, // 添加日期
        'LTE_createdDate': null // 添加日期
      },
      dateRangeDriver: [], // 日期范围

      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'descending',
      listLoading: false
    };
  },
  watch: {},
  methods: {
    init () {
      this.truckBellwetherId = this.$route.params.id;
      this.searchTableListDriver();
    },
    // --------------运力池-----------
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchTableListDriver();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableListDriver();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableListDriver();
    },
    // 运力池查询条件重置
    resetSearchConditionDriver () {
      resetObjNull(this.searchCondition);
      this.LIKE_driverName = null;
      this.LIKE_plateNumber = null;
      this.dateRangeDriver = [];
    },
    // 运力池查询
    searchTableListDriver () {
      let filters = objToFilter(this.searchCondition);
      if (this.LIKE_driverName) {
        filters += ';LIKE_truckLoadDriver.driverName=' + this.LIKE_driverName;
      }
      ;
      if (this.LIKE_plateNumber) {
        filters += ';LIKE_truckLoadDriver.plateNumber=' + this.LIKE_plateNumber;
      }
      ;
      if (this.dateRangeDriver[0]) {
        filters += ';GTE_createdDate=' + this.dateRangeDriver[0].toJSON();
        filters += ';LTE_createdDate=' + this.$ue.addDays(this.dateRangeDriver[1], 1).toJSON();
      }
      ;
      filters += ';EQ_truckBellwether.id=' + this.truckBellwetherId;
      this.listLoading = true;
      searchTruckBellwetherDriverList({
        filters: filters,
        size: this.pageSize,
        page: this.currentPage - 1,
        sort: 'createdDate,desc'
      }).then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
          this.total = Number(res.headers['x-total-count']);
        }
        ;
        this.listLoading = false;
      });
    }
  },
  // 初始化数据
  mounted () {
    this.init();
  }
};
</script>
